<template>
  <div class="analysis">
    <el-card>
      <template #header>
        <div class="card-header">
          <span class="title">数据分析</span>
        </div>
      </template>
      <div class="coming-soon">
        <el-icon size="48" class="mb-2"><DataAnalysis /></el-icon>
        <h3>数据分析功能开发中</h3>
        <p class="text-secondary">此功能正在开发中，敬请期待...</p>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { DataAnalysis } from '@element-plus/icons-vue'
</script>

<style lang="scss" scoped>
.analysis {
  .coming-soon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    color: var(--el-text-color-secondary);

    h3 {
      margin: 16px 0 8px 0;
      color: var(--el-text-color-regular);
    }

    p {
      margin: 0;
    }
  }
}
</style>